<template>
  <div>

    <template>
<!--      <el-form :inline="true" :model="formInline" class="demo-form-inline">-->

<!--        <el-form-item label="字典名称">-->
<!--          <el-input v-model="formInline.dictName" placeholder="请输入字典名称"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="字典类型">-->

<!--          <el-input v-model="formInline.sysDictType" placeholder="请输入字典类型"></el-input>-->

<!--        </el-form-item>-->
<!--        <el-form-item label="状态">-->
<!--          <el-select v-model="formInline.status" placeholder="字典状态">-->
<!--            <el-option label="正常" value="0"></el-option>-->
<!--            <el-option label="停用" value="1"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item><br>-->
<!--        <el-form-item label="创建时间">-->
<!--          <el-col :span="11">-->
<!--            <el-date-picker type="date" placeholder="开始日期" v-model="form.startTime" style="width: 100%;"></el-date-picker>-->
<!--          </el-col>-->

<!--          <el-col :span="11">-->
<!--            <el-date-picker type="date" placeholder="结束日期" v-model="form.endTime"   style="width: 100%;"></el-date-picker>-->
<!--          </el-col>-->
<!--        </el-form-item>-->


<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="list()">查询</el-button>-->
<!--          <el-button type="primary"  @click="reset()">重置</el-button>-->


<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <el-button @click="updateopen(scope.row)" type="text" size="small">详情</el-button>-->

<!--      <el-button @click="deletebyid(scope.row.postId)" type="text" size="small">删除</el-button>-->
      <el-button  @click="openadd()" type="primary" >新增</el-button>


      <el-button type="success" disabled>修改</el-button>
      <el-button type="warning" disabled>删除</el-button>
      <el-button @click="excel()"  type="danger" >导出</el-button>
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>

        <el-table-column
            prop="cropId"
            label="农作物ID"
            width="120">
          <template slot-scope="a">
            <el-button  @click="zdlist(a.row.cropId)" type="text" size="small">
              <span>{{a.row.cropId}}</span>
            </el-button>


          </template>
        </el-table-column>

        <el-table-column
            prop="name"
            label="农作物名称"
            width="120">
        </el-table-column>


        <el-table-column
            prop="scientificName"
            label="创建时间"
            width="120">
        </el-table-column>

        <el-table-column
            prop="originPlace"
            label="原产地"
            width="120">

        </el-table-column>

        <el-table-column
            prop="growingSeason"
            label="生长季节"
            width="120">
        </el-table-column>
        <el-table-column
            prop="harvestTime"
            label="收获时间"
            width="120">
        </el-table-column>
        <el-table-column
            prop="description"
            label="描述信息"
            width="120">
        </el-table-column>
        <el-table-column

            label="省市区"
            width="120">
          <template slot-scope="s">
            <span>    {{s.row.provincename}}/{{s.row.cityname}}/{{s.row.districtname}}
</span>

          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">

            <el-button @click="updateopen(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="deletebyid(scope.row)" type="text" size="small">删除</el-button>
            <el-button @click="Recordopenadd(scope.row.cropId)" type="success">检测</el-button>
          </template>
        </el-table-column>
      </el-table>

    </template>
    <el-dialog title="添加" :visible.sync="dialogFormVisible" >
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="农作物名字" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学名" :label-width="formLabelWidth" prop="scientificName">
          <el-input v-model="form.scientificName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="原产地" :label-width="formLabelWidth" prop="originPlace">
          <el-input v-model="form.originPlace" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生长季节" :label-width="formLabelWidth" prop="growingSeason">
          <el-input v-model="form.growingSeason" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收获时间" prop="harvestTime">
          <el-input v-model="form.harvestTime" autocomplete="off"></el-input>

        </el-form-item >
        <el-form-item label="省市区" :label-width="formLabelWidth" >
          <el-cascader
              v-model="value"
              :options="options"
              @change="handleChange"
              :props="prop"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="描述信息" :label-width="formLabelWidth" prop="description">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('ruleForm')">添加</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="dialogFormVisibletwo">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="农作物名字" :label-width="formLabelWidth" prop="name" >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学名" :label-width="formLabelWidth" prop="scientificName">
          <el-input v-model="form.scientificName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="原产地" :label-width="formLabelWidth" prop="originPlace">
          <el-input v-model="form.originPlace" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生长季节" :label-width="formLabelWidth" prop="growingSeason">
          <el-input v-model="form.growingSeason" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="收获时间" prop="harvestTime">
          <el-input v-model="form.harvestTime" autocomplete="off"></el-input>

        </el-form-item >
        <el-form-item label="省市区" :label-width="formLabelWidth" >
          <el-cascader
              v-model="value"
              :options="options"
              @change="handleChange"
              :props="prop"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="描述信息" :label-width="formLabelWidth" prop="description">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update('ruleForm')">修改</el-button>
      </div>
    </el-dialog>

    <el-dialog title="检测" :visible.sync="dialogFormVisiblethree" >
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="报告名称" :label-width="formLabelWidth" prop="reportName">
          <el-input v-model="form.reportName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="报告编号" :label-width="formLabelWidth" prop="reportNumber">
          <el-input v-model="form.reportNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="农产品id" :label-width="formLabelWidth" prop="cropIid">
          <el-input v-model="form.cropId" autocomplete="off"></el-input>

        </el-form-item>
        <el-form-item label=" 批次号" :label-width="formLabelWidth" prop="batchNumber">
          <el-input v-model="form.batchNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="检测日期" prop="inspectionDate">
          <el-col :span="11">
            <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.inspectionDate" style="width: 100%;"></el-date-picker>
          </el-col>

        </el-form-item>

        <el-form-item label="检验单位" :label-width="formLabelWidth" prop="testingUnit">
          <el-input v-model="form.testingUnit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="检验员" :label-width="formLabelWidth" prop="inspector">
          <el-input v-model="form.inspector" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="审核人" :label-width="formLabelWidth" prop="auditor">
          <el-input v-model="form.auditor" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label=" 批准人" :label-width="formLabelWidth" prop="approver">
          <el-input v-model="form.approver" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label=" 检验方法" :label-width="formLabelWidth" prop="testingMethod">
          <el-input v-model="form.testingMethod" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="检验设备" :label-width="formLabelWidth" prop="testingEquipment">
          <el-input v-model="form.testingEquipment" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label=" 检验结果" :label-width="formLabelWidth" prop="inspectionResults">
          <el-input v-model="form.inspectionResults" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="检测报告" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"

              action="http://127.0.0.1:8888/system/dictType/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Recordadd('ruleForm')">添加</el-button>
      </div>
    </el-dialog>
    <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "DictDataView",
  data() {
    return {
      dialogFormVisiblethree:false,
      ids:[],
      pageNum: 1,
      total: 0,
      pageSize: 3,
      dialogFormVisibletwo: false,
      formInline: {},
      formLabelWidth: "120px",
      form: {},
      tableData: [],
      dialogFormVisible: false,
      multipleSelection: [],
      sysDictType:'',
      rules: {
        name: [
          {required: true, message: '请输入农作物名称', trigger: 'blur'},
        ],
        scientificName: [
          {required: true, message: '请输入学名', trigger: 'blur'},
        ],
        originPlace: [
          {required: true, message: '请输入原产地', trigger: 'blur'},
        ],
        growingSeason: [
          {required: true, message: '请输入生长季节', trigger: 'blur'},
        ],
        harvestTime: [
          {required: true, message: '请输入收获时间', trigger: 'blur'},
        ],
        description: [
          {required: true, message: '描述信息', trigger: 'blur'},
        ],

      },
      imageUrl:'',
      headImg:"",
      value: [],

      prop:{
        label:'name',
        value:'id'
      }
    }
  }, methods: {
    Recordopenadd(cropId){
      this.dialogFormVisiblethree=true;
      this.form.cropId=cropId;
      console.log( this.form.cropId)
    },


    handleAvatarSuccess(res, file) {

      this.imageUrl = URL.createObjectURL(file.raw);
      if(res.code==1001){
        this.form.headImg=res.url;
        console.log(res.url);
      }



    },
    beforeAvatarUpload(file) {
      console.log(file)
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;
      //
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      return true;
    },
    Recordadd(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("system/ArgpCrops/Recordadd",this.form).then(res=>{

            if (res.status==200){
              this.$message.success("添加成功");
              this.dialogFormVisible=false;
              this.list();
            }else{
              this.$message.error("添加失败");
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleChange(value){
      console.log(value);
      if(value.length>0){
        console.log("有值");
        this.form.provinceId=value[0];
        this.form.cityId=value[1];
        this.form.districtId=value[2];
        console.log(  this.form.provinceId);
        console.log(  this.form.cityId);
        console.log(this.form.districtId);
      }
    },
    zdlist(dictType){
      localStorage.setItem("dictType",dictType);
     this.$router.push("/ArgpCropsGrowth");
    },
    reset(){
      window.location.reload()
    },

  listAll(){
    this.axios.post("/system/ArgpCrops/list?pageNum="+this.pageNum).then(res=>{
      this.tableData=res.data.list;
      this.total=res.data.total;
    })
    this.getCity();
    this.getCity();
    this.getCity();
  },
    handleCurrentChange(page) {
      this.pageNum = page;
      this.listAll(this.pageNum);
    },
    handleSelectionChange(val) {
        console.log(val)
      this.multipleSelection = val;
      for (let i = 0; i <val ; i++) {
        this.ids[i]=val[i].dictId;
      }
      console.log(this.ids)

    },
    excel(){
      location="http://localhost:9017/dict/excel";

    },
    deletebyid(row){
    this.form=row;
      this.axios.post("system/dict/delete",this.form).then(res=>{
        if (res.status==200){
          this.$message.success("删除成功");

          this.listAll();
        }else{
          this.$message.error("删除失败");
        }
      })
    },
    update(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("system/ArgpCrops/update",this.form).then(res=>{
            if (res.status==200){
              this.$message.success("修改成功");
              this.dialogFormVisibletwo=false;
              this.list();
            }else{
              this.$message.error("修改失败");
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    updateopen(row){
      console.log(row)
      this.value=[row.provinceId, row.cityId,row.districtId]
      console.log(this.value)
      this.dialogFormVisibletwo=true;
      this.form=row;

    },
    add(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("system/ArgpCrops/add",this.form).then(res=>{

            if (res.status==200){
              this.$message.success("添加成功");
              this.dialogFormVisible=false;
              this.list();
            }else{
              this.$message.error("添加失败");
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    openadd(){
      this.dialogFormVisible=true;
      this.form={};
      this.value=[6,79,717]
      console.log(this.value)

    },
    getCity(){
      this.axios.get("system/ArgpCrops/Citylist").then(r=>{
        this.options=r.data
        console.log(this.options)
      })
    },

    list(){
      this.axios.post("/system/ArgpCrops/dictlist",this.formInline).then(res=>{
        this.tableData=res.data;
      })
    }
  }, created() {
   this.listAll();
   this.getCity();
    this.listAll();
    this.listAll();
    this.listAll();

  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>